<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-select
          v-model="query.sqType"
          placeholder="战队类型"
          class="handle-select mr10"
        >
          <el-option key="1" label="战队库" value="team"></el-option>
          <el-option key="2" label="会员战队" value="people"></el-option>
        </el-select>
        <el-input
          v-model="query.search"
          placeholder="战队名称"
          class="handle-input mr10"
        ></el-input>
        <el-button type="primary" class="button-top" :icon="Search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button type="primary" class="button-top" :icon="Plus" @click="ClickAdd"
          >新增</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          type="index"
          :index="table_index"
          label="序号"
          width="55"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="id" label="ID" hidden=true  width="0" align="center"></el-table-column> -->
        <el-table-column prop="types" align="center" label="所属" width="80">
          <template #default="scope">
            {{
              scope.row.types === "team"
                ? "战队库"
                : scope.row.types === "people"
                ? "会员战队"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="战队名"
          width="120"
        ></el-table-column>
        <el-table-column label="人数" align="center" width="80" type="success">
          <template #default="scope">{{ scope.row.number }} </template>
        </el-table-column>
        <el-table-column label="战队Log" align="center" width="80">
          <template #default="scope">
            <el-image
              class="table-td-thumb"
              :src="scope.row.thum"
              :z-index="10"
              :preview-src-list="[scope.row.thum]"
              preview-teleported
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="队长" width="200">
          <template #default="scope">
            <i class="el-icon-lx-peoplefill"></i> {{ scope.row.captain }}
          </template>
        </el-table-column>

        <el-table-column label="模式TPP/FPP" align="center" width="120">
          <template #default="scope">
            <el-tag
              :type="
                scope.row.model === 'TPP'
                  ? 'success'
                  : scope.row.model === 'FPP'
                  ? 'warning'
                  : scope.row.model === 'ALL'
                  ? 'danger'
                  : ''
              "
            >
              {{ scope.row.model }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-tag
              :type="
                scope.row.status === 1
                  ? 'success'
                  : scope.row.status === 2
                  ? 'warning'
                  : scope.row.status === 3
                  ? 'info'
                  : ''
              "
            >
              {{
                scope.row.status === 1
                  ? "已注册"
                  : scope.row.status === 2
                  ? "待审核"
                  : scope.row.status === 3
                  ? "注销"
                  : ""
              }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createdTime" label="注册时间"></el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template #default="scope">
            <el-button
              text
              :icon="Search"
              @click="teamVisit(scope.$index, scope.row)"
              v-permiss="15"
            >
              成员
            </el-button>
            <el-button
              text
              :icon="Edit"
              @click="handleEdit(scope.$index, scope.row)"
              v-permiss="15"
            >
              编辑
            </el-button>
            <el-button
              text
              :icon="Delete"
              class="red"
              @click="handleDelete(scope.row.id)"
              v-permiss="16"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next"
          v-model:page-size="query.limit"
          :page-sizes="[10, 15, 20, 50]"
          :current-page="query.page"
          :total="pageTotal"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 编辑战队 -->
    <el-dialog title="编辑" v-model="editVisible" v-if="editVisible" :before-close="dialogClose(1)" width="30%">
      <el-form label-width="70px" >
        <el-form-item label="战队名称">
          <el-input v-model="form.name" disabled width="20px"></el-input>
        </el-form-item>
        <el-form-item label="战队类型">
          <el-select
            v-model="form.types"
            placeholder="战队类型"
            :no-data-text="form.types"
            class="handle-select mr10"
          >
            <el-option key="1" label="战队库" value="team"></el-option>
            <el-option key="2" label="会员战队" value="people"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模式">
          <el-select
            v-model="form.model"
            placeholder="模式"
            :no-data-text="form.model"
            class="handle-select mr10"
          >
            <el-option key="3" label="TPP" value="TPP"></el-option>
            <el-option key="4" label="FPP" value="FPP"></el-option>
            <el-option key="5" label="ALL" value="ALL"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="战队Log">
          <Editimg
            title="Log上传"
            :imgSrc="form.thum"
            :avatarImg="form.thum"
            v-on:getImage="getImage"
          ></Editimg>
        </el-form-item>

        <el-form-item label="队长">
          <!-- //自动补全搜索框 -->
          <el-autocomplete
            v-model="form.captain"
            :fetch-suggestions="querySearchAsync"
            placeholder="Please input"
            @select="handleSelect"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 成员查看框 -->
    <el-dialog title="查看成员" v-model="visitTeam" width="50%">
      <el-form label-width="70px">
        <el-form-item label="战队名称">
          <el-input class="w-50 m-20" style="width:200px" v-model="dialogQuery.teamCode" width="100" disabled></el-input>
        </el-form-item>
          <el-form-item label="成员名称">
          <el-input class="w-50 m-20" style="width:200px;margin: 0 5px 0 0;" v-model="dialogQuery.search" width="100" ></el-input>
          <el-button type="primary" :icon="Search" @click="SearchPlayer"
          >搜索</el-button
        >
        </el-form-item>
      </el-form>
      <el-table
        :data="PlayerData"
        border
        class="table"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" width="200" label="游戏ID"></el-table-column>
        <!-- <el-table-column prop="where" label="游戏位置"></el-table-column>
        <el-table-column prop="work" label="FM职位"></el-table-column> -->
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag
              :type="
                scope.row.status === 1
                  ? 'success'
                  : scope.row.status === 2
                  ? 'primary'
                  : scope.row.status === 3
                  ? 'warning'
                  : scope.row.status === 4
                  ? 'danger'
                  : 'info'
              "
            >
              {{ scope.row.status=== 1
                  ? '过审'
                  : scope.row.status === 2
                  ? '审核中'
                  : scope.row.status === 3
                  ? '拒绝'
                  : scope.row.status === 4
                  ? '封禁'
                  : '未知' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="加入时间"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="dialogQuery.page"
          :page-size="dialogQuery.limit"
          :total="dialogQuery.total"
          @current-change="dialoghandlePageChange"
        ></el-pagination>
      </div>
    </el-dialog>

    <!-- 新增战队 -->
    <el-dialog title="编辑" v-model="addVisible" v-if="addVisible" :before-close="dialogClose(2)" width="30%">
      <el-form label-width="70px" ref="refaddform">
        <el-form-item label="战队类型">
          <el-select
            v-model="form.types"
            placeholder="战队类型"
            class="handle-select mr10"
          >
            <el-option key="1" label="战队库" value="team"></el-option>
            <el-option key="2" label="会员战队" value="people"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模式">
          <el-select
            v-model="form.model"
            placeholder="模式"
            class="handle-select mr10"
          >
            <el-option key="3" label="TPP" value="TPP"></el-option>
            <el-option key="4" label="FPP" value="FPP"></el-option>
            <el-option key="5" label="ALL" value="ALL"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="战队名称">
          <el-input v-model="form.name" width="20px"></el-input>
        </el-form-item>
        <el-form-item label="战队Log">
          <Editimg
            title="Log上传"
            :imgSrc="imgsrc"
            v-on:getImage="getImage"
          ></Editimg>
        </el-form-item>

        <el-form-item label="队长">
          <!-- //自动补全搜索框 -->
          <el-autocomplete
            v-model="form.captain"
            :fetch-suggestions="querySearchAsync"
            placeholder="Please input"
            @select="handleSelect"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="AddEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="teamtable">
import { ref, reactive, unref } from "vue";
import VueCropper from "vue-cropperjs";
import { AxiosRequestConfig } from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import Editimg from "./editimg.vue";
import "cropperjs/dist/cropper.css";
import {
  GetSquadsList,
  AddSquads,
  EditSquads,
  DeleSquads,
  GetPlayerList
} from "../api/squads";
// import {GetPlayerList} from "../api/palyer.ts";
import { el } from "element-plus/es/locale";
interface LinkItem {
  value: string;
  key: string;
}

const links = ref<LinkItem[]>([]);
interface TableItem {
  id: number;
  name: string;
  thum: string;
  number: number;
  status: number;
  types: string;
  captain: string;
  model: string;
  CreatedTime: string;
  UpdateTime: string;
}
interface Player {
  id: number;
  teamCode: string;
  teamName: string;
  name: string;
  work: string;
  where: string;
  model: string;
  status: number;
  createdTime: string;
}


const query = reactive({
  sqType: "",
  search: "",
  total: 15,
  page: 1,
  limit: 10,
});
const dialogQuery = reactive({
  teamCode: "",
  search: "",
  total: 0,
  page: 1,
  limit: 10,
});
const tableData = ref<TableItem[]>([]);
const PlayerData = ref<Player[]>([]);
const pageTotal = ref(0);

// 表格编辑时弹窗和保存
const editVisible = ref(false);
const visitTeam = ref(false);
const addVisible = ref(false);
let form = reactive({
  id:0,
	name: '',
  captain: '',
  types: '',
  model: '',
  thum: '',
});

const getImage = (image: string) => {
	imgsrc.value=image;
  form.thum = image;
  // console.log(image)
};
// 自动补全
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value;
  cb(results);
};
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};
// 搜索
const handleSelect = (item: LinkItem) => {
  console.log(item);
};
// 获取表格数据SearchPlayer
const SearchPlayer = async () => {
  let urlparm = {
    teamCode: dialogQuery.teamCode,
    search: dialogQuery.search,
    page: dialogQuery.page,
    limit: dialogQuery.limit,
  };
  const { data }:any = await GetPlayerList(urlparm);

  PlayerData.value = data.data;
 dialogQuery.total=data.total

  // pageTotal.value = 15;
};
const init = async () => {
  let urlparm = {
    sqType: query.sqType,
    search: query.search,
    page: query.page,
    limit: query.limit,
  };
  const { data }:any = await GetSquadsList(urlparm);

  tableData.value = data.data;
  pageTotal.value = data.total;

  // pageTotal.value = 15;
};
init();
// 查询操作
const handleSearch = () => {
  query.page = 1;
  init();
};
// 分页导航
const handlePageChange = (val: number) => {
  query.page = val;
  init();
};
const handleSizeChange = (val: number) => {
  query.limit = val;
  init();
};

const table_index = (index: number) => {
  return (query.page - 1) * query.limit + index + 1;
};

// 弹窗分页导航
const dialoghandlePageChange = (val: number) => {
  dialogQuery.page = val;
  SearchPlayer();
};

const dialogClose = (types:number)=>{
 
  //编辑
  if(types==1){
    addVisible.value=false
  }else if(types==2){
    editVisible.value=false
  }
}
// 删除操作
const handleDelete = (id: number) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(() => {
      DeleSquads(id)
        .then((res:any) => {
          if (res.data.code === 200 && res.data.data === 1) {
            ElMessage.success("删除成功");
            init();
          } else {
            ElMessage.error(res.data.msg);
          }
        })
        .catch((res) => {
          ElMessage.error(res.data.msg);
        });
      
    })
    .catch(() => {});
};

let idx: number = -1;
const handleEdit = (index: number, row: any) => {
  links.value = [
    { value: "KFC_DuoShou", key: "kfc" },
    { value: "KFC_Vi50", key: "id" },
  ];
  idx = index;
  form.id=row.id
  form.name = row.name;
  form.captain = row.captain;
  form.thum=row.thum;
  form.model=row.model;
  form.types=row.types;
  editVisible.value = true;
};
const teamVisit = (index: number, row: any) => {

  dialogQuery.teamCode = row.name;
  visitTeam.value = true;
  SearchPlayer()
};
//编辑战队
const saveEdit = () => {

  EditSquads(form)
    .then((res:any) => {
      if (res.data.code === 200 && res.data.data === 1) {
        ElMessage.success(`修改 ${form.name} 战队信息成功`);
        editVisible.value = false;
		init()
      } else {
        ElMessage.error(res.data.msg);
      }
    })
    .catch((res) => {
      ElMessage.error(res.data.msg);
    });
};
//添加战队
let refaddform = ref()
let imgsrc=ref('')
const ClickAdd = ()=>{
	imgsrc.value='';
	addVisible.value=true;
	
	form.name= '';
	form.id= 0;
	form.captain='';
	form.types='';
	form.model='';
	form.thum='';
	imgsrc.value='';
}
const AddEdit = () => {
  // console.log(value);
  AddSquads(form)
    .then((res:any) => {
      if (res.data.code === 200 && res.data.data === 1) {
        init();
        ElMessage.success("添加成功");
		   addVisible.value = false;
	  	  const reset=unref(refaddform)
	      reset.value.resetFields();
		    
      } else {
        ElMessage.error(res.data.msg);
      }
    })
    .catch((res) => {
      ElMessage.error(res.data.msg);
    });

 
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #f56c6c;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.button-top{
  margin-left: 10px;
}
</style>
